<style lang="less">
  @import "../../../styles/table-common.less";
</style>
<template>
  <div class="search">
    <!-- <div>服务企业信息管理</div> -->
    <Card>
      <Row class="operation">
        <Button @click="add" type="primary" icon="md-add">添加岗位培训内容</Button>
        <!-- <Button @click="delAll" icon="md-trash">批量删除</Button> -->
        <Button @click="getJobList" icon="md-refresh">刷新</Button>
      </Row>
      <Row v-show="openTip">
        <Alert show-icon>
          已选择
          <span class="select-count">{{selectCount}}</span> 项
          <a class="select-clear" @click="clearSelectAll">清空</a>
        </Alert>
      </Row>
      <Row>
        <Table
                :loading="loading"
                border
                :columns="columns"
                :data="data"
                sortable="custom"
                @on-sort-change="changeSort"
                @on-selection-change="showSelect"
                ref="table"
        ></Table>
      </Row>
      <Row type="flex" justify="end" class="page">
        <Page
                :current="searchForm.pageNumber"
                :total="total"
                :page-size="searchForm.pageSize"
                @on-change="changePage"
                @on-page-size-change="changePageSize"
                :page-size-opts="[10,20,50]"
                size="small"
                show-total
                show-elevator
                show-sizer
        ></Page>
      </Row>
    </Card>

    <!-- 岗位培训内容和岗位分支培训内容 -->
    <Modal
            :title="modalTitle"
            v-model="train.isVisible"
            :mask-closable="false"
            :width="500"
            :styles="{top: '50px',width: type === '1' ? '1000px' : '900px'}"
            class="permModal"
    >
      <div style="position:relative">
        <Row style="margin-bottom: 20px;">
          <Button type="primary" icon="md-add" @click="addJobTrain">{{train.title}}</Button>
          <Button type="default" icon="md-trash" @click="delAll" style="margin-left: 20px;">批量删除</Button>
        </Row>
        <Table
                :loading="loading"
                border
                :columns="type === '1' ? trainColumns : partColumns"
                :data="type === '1' ? trainData : partData"
                sortable="custom"
                @on-sort-change="changeSort"
                @on-selection-change="showSelect"
                ref="table"
        ></Table>
      </div>
    </Modal>

    <jobEdit :data="form" :type="showType" v-model="showUser" @on-submit="getJobTrainList" />

    <partEdit :data="partForm" :type="partType" v-model="showPart" @on-submit="getJobTrainPartList" />
  
    <!-- 考试内容 -->
    <Modal
            title="考试内容"
            v-model="exam.isVisible"
            :mask-closable="false"
            :width="500"
            :styles="{top: '50px',width:'900px'}"
            class="permModal"
    >
      <div style="position:relative">
        <Row style="margin-bottom: 20px;">
          <Button type="primary" icon="md-add" @click="addExam">{{exam.title}}</Button>
          <Button type="default" icon="md-trash" @click="delAllExam" style="margin-left: 20px;">批量删除</Button>
        </Row>
        <Table
                :loading="loading"
                border
                :columns="examColumns"
                :data="examData"
                sortable="custom"
                @on-sort-change="changeSort"
                @on-selection-change="showSelect"
                ref="table"
        ></Table>
      </div>
    </Modal>

    <examEdit :data="examForm" :type="examType" v-model="showExam" @on-submit="getExamList" />
  </div>
</template>

<script>
  import {
    getServiceEnterpriseUser, 
    removeJobTrain,
    getJobTrainList,
    getTrainPartList,
    removeTrainPart,
    getExamContentList,
    removeExamContent
  } from "@/api/index";
  import jobEdit from "./jobTrainEdit.vue";
  import partEdit from "./jobTrainPartEdit.vue";
  import examEdit from "./examEdit.vue";
  export default {
    name: "user-manage",
    components: {
      jobEdit,
      partEdit,
      examEdit
    },
    data() {
      return {
        jobData: [],
        height: 510,
        showUser: false,
        showType: "0",
        loading: true,
        openTip: true,
        selectCount: 0,
        selectList: [],
        searchKey: "",
        searchForm: {
          pageNumber: 1,
          pageSize: 10,
          sort: "createTime",
          order: "desc"
        },
        form: {},
        columns: [
          {
            type: "selection",
            width: 60,
            align: "center",
            fixed: "left"
          },
          {
            type: "index",
            width: 60,
            align: "center",
            fixed: "left"
          },
          {
            title: "公司logo",
            key: "avatar",
            minWidth: 125,
            render: (h, params) => {
              return h('avatar', params.row.avatar)
            }
          },
          {
            title: "公司名称",
            key: "companyName",
            minWidth: 125
          },
          {
            title: "公司类型",
            key: "companyType",
            minWidth: 125
          },
          {
            title: "公司规模",
            key: "headcount",
            minWidth: 125
          },
          {
            title: "公司地址",
            key: "companyAddress",
            minWidth: 200
          },
          {
            title: "状态",
            key: "managementForms",
            minWidth: 125
          },
          {
            title: "操作",
            key: "action",
            width: 150,
            align: "center",
            fixed: "right",
            render: (h, params) => {
              let enableOrDisable = "";
              return h("div", [
                h(
                        "Button",
                        {
                          props: {
                            type: "primary",
                            size: "small"
                          },
                          style: {
                            marginRight: "5px"
                          },
                          on: {
                            click: () => {
                              this.view(params.row);
                            }
                          }
                        },
                        "查看岗位培训"
                )
              ]);
            }
          }
        ],
        data: [],
        total: 0,
        trainColumns: [
          {
            type: "selection",
            width: 60,
            align: "center",
            fixed: "left"
          },
          {
            type: "index",
            width: 60,
            align: "center",
            fixed: "left"
          },
          {
            title: "培训标题",
            key: "trainTitle",
            minWidth: 125
          },
          {
            title: "培训岗位",
            key: "jobName",
            minWidth: 90
          },
          {
            title: "培训类型",
            key: "jobType",
            minWidth: 90,
            render: (h, params) => {
              if (params.row.jobType === 1) {
                return h("span", "岗前")
              } else if (params.row.jobType === 2){
                return h("span", "岗后")
              } else {
                return h("span", "未知")
              }
            }
          },
          {
            title: "培训开始时间",
            key: "trainBeginTime",
            minWidth: 175
          },
          {
            title: "培训结束时间",
            key: "trainEndTime",
            minWidth: 175
          },
          {
            title: "操作",
            key: "action",
            width: 320,
            align: "center",
            fixed: "right",
            render: (h, params) => {
              let enableOrDisable = "";
              return h("div", [
                h(
                        "Button",
                        {
                          props: {
                            type: "primary",
                            size: "small"
                          },
                          style: {
                            marginRight: "5px"
                          },
                          on: {
                            click: () => {
                              this.edit(params.row);
                            }
                          }
                        },
                        "编辑"
                ),
                h(
                        "Button",
                        {
                          props: {
                            type: "primary",
                            size: "small"
                          },
                          style: {
                            marginRight: "5px"
                          },
                          on: {
                            click: () => {
                              this.viewPart(params.row);
                            }
                          }
                        },
                        "查看岗位分支培训内容"
                ),
                h(
                        "Button",
                        {
                          props: {
                            type: "error",
                            size: "small"
                          },
                          style: {
                            marginRight: "5px"
                          },
                          on: {
                            click: () => {
                              this.remove(params.row);
                            }
                          }
                        },
                        "删除"
                )
              ]);
            }
          }
        ],
        modalTitle: '',
        train: {
          jobTrainId: '',
          enterpriseUserId: '',
          title: '',
          isVisible: false
        },
        trainData: [],
        showPart: false,
        partType: "0",
        type: "0",
        partData: [],
        partColumns: [
          {
            type: "selection",
            width: 60,
            align: "center",
            fixed: "left"
          },
          {
            type: "index",
            width: 60,
            align: "center",
            fixed: "left"
          },
          {
            title: "岗位培训分支标题",
            key: "trainPartTitle",
            minWidth: 125
          },
          {
            title: "岗位培训分支内容",
            key: "trainPartContent",
            minWidth: 125,
            ellipsis: true, 
//             render: (h, params) => {
//             return h('Tooltip', {
//               props: {
//                 placement: 'top'
//               }
//             }, [
//                 h('span', {
// 　　　　　　style: {
// 　　　　　　　　display: 'inline-block',
// 　　　　　　　　width: params.column._width*0.9+'px',
// 　　　　　　　　overflow: 'hidden',
// 　　　　　　　　textOverflow: 'ellipsis',
// 　　　　　　　　whiteSpace: 'nowrap',
// 　　　　　　},
// 　　　　　　}, params.row.trainPartContent),
//                 h('span', {
//                   slot: 'content',             //slot属性
//                   style: {
//                     whiteSpace: 'normal',
//                     wordBreak: 'break-all'
//                   }
//                 }, params.row.trainPartContent)
//               ])
//             }
          },
          {
            title: "操作",
            key: "action",
            width: 220,
            align: "center",
            fixed: "right",
            render: (h, params) => {
              let enableOrDisable = "";
              return h("div", [
                h(
                        "Button",
                        {
                          props: {
                            type: "primary",
                            size: "small"
                          },
                          style: {
                            marginRight: "5px"
                          },
                          on: {
                            click: () => {
                              this.edit(params.row);
                            }
                          }
                        },
                        "编辑"
                ),
                h(
                        "Button",
                        {
                          props: {
                            type: "default",
                            size: "small"
                          },
                          style: {
                            marginRight: "5px"
                          },
                          on: {
                            click: () => {
                              this.viewExam(params.row);
                            }
                          }
                        },
                        "考试内容"
                ),
                h(
                        "Button",
                        {
                          props: {
                            type: "error",
                            size: "small"
                          },
                          style: {
                            marginRight: "5px"
                          },
                          on: {
                            click: () => {
                              this.remove(params.row);
                            }
                          }
                        },
                        "删除"
                )
              ]);
            }
          }
        ],
        partForm: {},
        exam: {
          isVisible: false,
          title: '',
          trainingJobPartId: ''
        },
        examForm: {},
        examType: "0",
        showExam: false,
        examData: [],
        examColumns: [
          {
            type: "selection",
            width: 60,
            align: "center",
            fixed: "left"
          },
          {
            type: "index",
            width: 60,
            align: "center",
            fixed: "left"
          },
          {
            title: "考试题目",
            key: "examTitle",
            minWidth: 125
          },
          {
            title: "考试类型",
            key: "examType",
            minWidth: 125,
            render: (h, params) => {
              if (params.row.examType === 1) {
                return h('span', '单选')
              } else if (params.row.examType === 2) {
                return h('span', '多选')
              } else if (params.row.examType === 3) {
                return h('span', '判断')
              } else {
                return h('span', '其他')
              }
            }
          },
          {
            title: "正确选项",
            key: "rightAnswer",
            minWidth: 125,
            render: (h, params) => {
              if (params.row.examType === 1) {
                if (params.row.rightAnswer === '1') {
                  return h('span', 'A')
                } else if (params.row.rightAnswer === '2') {
                  return h('span', 'B')
                } else if (params.row.rightAnswer === '3') {
                  return h('span', 'C')
                } else if (params.row.rightAnswer === '4') {
                  return h('span', 'D')
                } else {
                  return h('span', '暂无')
                }
              } else if (params.row.examType === 2) {
                if (params.row.rightAnswer.indexOf('1')) {
                  params.row.rightAnswer = params.row.rightAnswer.replace(/1/g,"A")
                }
                if (params.row.rightAnswer.indexOf('2')) {
                  params.row.rightAnswer = params.row.rightAnswer.replace(/2/g,"B")
                }
                if (params.row.rightAnswer.indexOf('3')) {
                  params.row.rightAnswer = params.row.rightAnswer.replace(/3/g,"C")
                }
                if (params.row.rightAnswer.indexOf('4')) {
                  params.row.rightAnswer = params.row.rightAnswer.replace(/4/g,"D")
                }
                return h('span', params.row.rightAnswer)
              } else if (params.row.examType === 3) {
                if (params.row.rightAnswer === '1') {
                  return h('span', '对')
                } else if (params.row.rightAnswer === '2') {
                  return h('span', '错')
                } else {
                  return h('span', '暂无')
                }
              }
            }
          },
          {
            title: "正答解析",
            key: "rightAnswerAnalysis",
            minWidth: 125
          },
          {
            title: "操作",
            key: "action",
            width: 220,
            align: "center",
            fixed: "right",
            render: (h, params) => {
              let enableOrDisable = "";
              return h("div", [
                h(
                        "Button",
                        {
                          props: {
                            type: "primary",
                            size: "small"
                          },
                          style: {
                            marginRight: "5px"
                          },
                          on: {
                            click: () => {
                              this.editExam(params.row);
                            }
                          }
                        },
                        "编辑"
                ),
                h(
                        "Button",
                        {
                          props: {
                            type: "error",
                            size: "small"
                          },
                          style: {
                            marginRight: "5px"
                          },
                          on: {
                            click: () => {
                              this.removeExam(params.row);
                            }
                          }
                        },
                        "删除"
                )
              ]);
            }
          }
        ]
      };
    },
    methods: {
      init() {
        this.getJobList();
      },
      changePage(v) {
        this.searchForm.pageNumber = v;
        this.getJobList();
        this.clearSelectAll();
      },
      changePageSize(v) {
        this.searchForm.pageSize = v;
        this.getJobList();
      },
      getJobList() {
        // 多条件搜索用户列表
        this.loading = true;
        getServiceEnterpriseUser(this.searchForm).then(res => {
          this.loading = false;
          if (res.code === 200) {
            this.data = res.result.content;
            this.total = res.result.size;
          }else {
            this.data = [];
            this.total = 0;
          }
        });
      },
      changeSort(e) {
        this.searchForm.sort = e.key;
        this.searchForm.order = e.order;
        if (e.order === "normal") {
          this.searchForm.order = "";
        }
        this.getJobList();
      },
      showDetail(v) {
        // 转换null为""
        for (let attr in v) {
          if (v[attr] == null) {
            v[attr] = "";
          }
        }
        let str = JSON.stringify(v);
        let data = JSON.parse(str);
        this.form = data;
        this.showType = "0";
        this.showUser = true;
      },
      add() {
        this.showType = "2";
        this.showUser = true;
      },
      edit(v) {
        // 转换null为""
        for (let attr in v) {
          if (v[attr] == null) {
            v[attr] = "";
          }
        }
        let str = JSON.stringify(v);
        let data = JSON.parse(str);
        this.train.isVisible = false;
        
        if (this.type === "1") {
          this.form = data;
          this.form.enterpriseId = this.train.enterpriseId;
          this.showType = "1";
          this.showUser = true;
        } else {
          this.partForm = data;
          this.partForm.jobTrainId = this.train.jobTrainId;
          this.partType = "1";
          this.showPart = true;
        }
      },
      viewExam(v) {
        this.exam.trainingJobPartId = v.id;
        this.examForm.trainingJobPartId = v.id;

        this.getExamList()
      },
      addExam() {
        this.examType = "2";
        this.exam.isVisible = false;
        this.showExam = true;
      },
      getExamList() {
        let params = {}
        params.pageNumber = 1;
        params.pageSize = 10;
        params.sort = 'createTime';
        params.order = 'desc';
        params.trainingJobPartId = this.exam.trainingJobPartId;
        getExamContentList(params).then(res => {
          if (res.code === 200) {
            this.examData = res.result.content;
          } else {
            this.examData = [];
          }
        })
        this.train.isVisible = false;
        this.exam.title = "添加考试试题";
        this.exam.isVisible = true;
      },
      view(v) {
        this.train.enterpriseId = v.id;
        this.form.enterpriseId = v.id;
        this.modalTitle = "查看 " + v.companyName + " 的岗位培训列表"
        this.getJobTrainList()
      },
      getJobTrainList() {
        this.type = "1";
        let params = {}
        params.pageNumber = 1;
        params.pageSize = 10;
        params.sort = 'createTime';
        params.order = 'desc';
        params.enterpriseId = this.form.enterpriseId;

        getJobTrainList(params).then(res => {
          if (res.code === 200) {
            console.log(this.type)
            this.trainData = res.result.content;
          } else if (res.code === 201) {
            this.trainData = []
          }
        })
        this.train.title = "添加岗位培训内容"
        this.train.isVisible = true;
      },
      addJobTrain() {
        this.train.isVisible = false;
        if (this.type === "1") {
          this.showType = "2";
          this.showUser = true;
        } else if (this.type === "2") {
          this.partType = "2";
          this.showPart = true;
        }
      },
      viewPart(v) {
        this.modalTitle = "查看 " + v.jobName + " 的培训分支列表"
        this.train.jobTrainId = v.id;
        this.partForm.jobTrainId = v.id;
        this.getJobTrainPartList()
      },
      getJobTrainPartList() {
        this.type = "2";
        let params = {}
        params.pageNumber = 1;
        params.pageSize = 10;
        params.sort = 'createTime';
        params.order = 'desc';
        params.jobTrainId = this.partForm.jobTrainId;

        getTrainPartList(params).then(res => {
          if (res.code === 200) {
            this.partData = res.result.content;
          } else if (res.code === 201) {
            this.partData = []
          }
        })
        this.train.title = "添加岗位培训分支内容"
        this.train.isVisible = true;
      },
      remove(v) {
        this.$Modal.confirm({
          title: "确认删除",
          content: "您确认要删除"+ (this.type === '1' ? "岗位培训内容" : "岗位培训分支内容")+"吗?",
          loading: true,
          onOk: () => {
            if (this.type === "1") {
              removeJobTrain({ ids: v.id }).then(res => {
                this.$Modal.remove();
                if (res.success) {
                  this.$Message.success("删除成功");
                  this.getJobTrainList();
                }
              });
            } else {
              removeTrainPart({ ids: v.id }).then(res => {
                this.$Modal.remove();
                if (res.success) {
                  this.$Message.success("删除成功");
                  this.getJobTrainPartList();
                }
              });
            }
          }
        });
      },
      showSelect(e) {
        // this.exportData = e;
        this.selectList = e;
        this.selectCount = e.length;
      },
      clearSelectAll() {
        this.$refs.table.selectAll(false);
      },
      delAll() {
        if (this.selectCount <= 0) {
          this.$Message.warning("您还未选择要删除的数据");
          return;
        }
        this.$Modal.confirm({
          title: "确认删除",
          content: "您确认要删除所选的 " + this.selectCount + " 条数据?",
          loading: true,
          onOk: () => {
            let ids = "";
            this.selectList.forEach(function(e) {
              ids += e.id + ",";
            });
            ids = ids.substring(0, ids.length - 1);
            if (this.type === "1") {
              removeJobTrain({ ids: ids }).then(res => {
                this.$Modal.remove();
                if (res.success) {
                  this.$Message.success("删除成功");
                  this.clearSelectAll();
                  this.getJobTrainList();
                }
              });
            } else {
              removeTrainPart({ ids: ids }).then(res => {
                this.$Modal.remove();
                if (res.success) {
                  this.$Message.success("删除成功");
                  this.clearSelectAll();
                  this.getJobTrainPartList();
                }
              });
            }
          }
        });
      },
      editExam(v) {
        for (let attr in v) {
          if (v[attr] == null) {
            v[attr] = "";
          }
        }
        let str = JSON.stringify(v);
        let data = JSON.parse(str);
        this.exam.isVisible = false;
        this.examForm = data;
        this.examForm.jobTrainPartId = this.exam.trainingJobPartId;
        this.examType = "1";
        this.showExam = true;
      },
      removeExam(v) {
        this.$Modal.confirm({
          title: "确认删除",
          content: "您确认要删除所选试题吗?",
          loading: true,
          onOk: () => {
            removeExamContent({ ids: v.id }).then(res => {
              this.$Modal.remove();
              if (res.success) {
                this.$Message.success("删除成功");
                this.getExamList();
              }
            });
          }
        });
      },
      delAllExam() {
        if (this.selectCount <= 0) {
          this.$Message.warning("您还未选择要删除的数据");
          return;
        }
        this.$Modal.confirm({
          title: "确认删除",
          content: "您确认要删除所选的 " + this.selectCount + " 条数据?",
          loading: true,
          onOk: () => {
            let ids = "";
            this.selectList.forEach(function(e) {
              ids += e.id + ",";
            });
            ids = ids.substring(0, ids.length - 1);
            removeExamContent({ ids: ids }).then(res => {
              this.$Modal.remove();
              if (res.success) {
                this.$Message.success("删除成功");
                this.clearSelectAll();
                this.getExamList();
              }
            });
          }
        });
      },
    },
    mounted() {
      // 计算高度
      this.height = Number(document.documentElement.clientHeight - 230);
      this.init();
    }
  };
</script>